/* eslint-disable no-use-before-define */
/* eslint-disable import/no-unresolved */
import { CardGroup } from '@/components/Card';
import React, {
  useState, createContext, useContext, useEffect
} from 'react'
import imgSrc from '@/../public/icons/icon-192x192.png'
import { If } from 'react-if'
import _ from 'lodash'

const PageContext = createContext()

function Card({ id, name }) {
  const data = {
    title: '一点都不慌',
    rank: 1,
    sale: 16,
    unit: '元',
    cost: 6,
    count: 200,
    type: '杯',
    id: 5,
  }

  const {
    title, rank, sale, unit, cost, count, type
  } = data

  const { updateDataSource } = useContext(PageContext)

  const onMove = (group) => {
    updateDataSource((prev) => {
      const newDataSource = prev.map((item) => {
        if (item.id === id) {
          item.type = 'group3'
        }
        return item
      })

      return newDataSource
    })
  }

  return (
    <div>
      {name}
      {/* img & level */}
      <div style={{ position: 'relative' }}>
        <img width="200px" height="200px" src={imgSrc} alt="" />

        <div style={{ position: 'absolute', color: 'white', bottom: '0' }}>
          <div>9.5分</div>
        </div>
      </div>

      {/* title */}
      <div style={{ position: 'relative', display: 'flex' }}>
        <div>{title}</div>

        <If condition={rank}>
          <div>
            <div>1</div>

            <div>销量排名</div>
          </div>
        </If>
      </div>

      {/* price */}
      <div style={{ display: 'flex' }}>
        <div>
          {sale}
          {unit}
        </div>

        <div>
          {cost}
          {unit}
          成本价
        </div>
      </div>

      {/* order count */}
      <div>
        {count}
        {type}
      </div>

      <div style={{ display: 'flex' }}>
        <div>编辑</div>

        <div onClick={onMove}>移动</div>

        <div>推荐</div>
      </div>
    </div>
  )
}

function GroupedCard({ data, title }) {
  const [dataSource, setDataSource] = useState(data)

  useEffect(() => {
    setDataSource(data)
  }, [data])

  return (
    <>
      <div>{title}</div>
      <CardGroup
        dataSource={dataSource}
        setDataSource={setDataSource}
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)'
        }}
      >
        {
          dataSource.map((item) => (
            <Card key={item.id} {...item} />
          ))
        }
      </CardGroup>
    </>
  )
}

const Demo = () => {
  const [dataSource, updateDataSource] = useState([
    { id: 1, name: "shrek", type: 'group1' },
    { id: 2, name: "fiona", type: 'group1' },
    { id: 3, name: "nice", type: 'group1' },
    { id: 4, name: "yes", type: 'group2' },
    { id: 5, name: "ooohhhhhhhhh", type: 'group2' },
    { id: 6, name: "???????", type: 'group2' },
    { id: 7, name: "cxvcxvxcv", type: 'group3' },
    { id: 8, name: "zzzz", type: 'group3' },
    { id: 9, name: "??zxc?????", type: 'group3' },
    { id: 10, name: "yexxcvzs", type: 'group2' },
    { id: 11, name: "ooohqwrethhhhhhhh", type: 'group2' },
    { id: 12, name: "??agdsg?????", type: 'group2' },
    { id: 13, name: "yefdsfxvcs", type: 'group3' },
    { id: 14, name: "ooohhhhhhhhh", type: 'group3' },
    { id: 15, name: "?????ssss??", type: 'group3' },
  ])

  const ctx = {
    updateDataSource,
  }

  return (
    <PageContext.Provider value={ctx}>
      {
        Object.entries(_.groupBy(dataSource, 'type')).map(([group, items]) => (
          <GroupedCard key={group} data={items} title={group} />
        ))
      }
    </PageContext.Provider>
  )
}

export default Demo
